import 'dart:convert';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/resources/assets.dart';
import 'package:bxultimate/shared/shared.dart';
import 'package:bxultimate/widgets/mk_load_image.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class MerchantEnterPayCodePage extends StatefulWidget {
  const MerchantEnterPayCodePage({Key? key}) : super(key: key);

  @override
  State<MerchantEnterPayCodePage> createState() =>
      _MerchantEnterPayCodePageState();
}

class _MerchantEnterPayCodePageState extends State<MerchantEnterPayCodePage> {
  final controller = Get.find<MerchantEnterPayCodeController>();
  final state = Get.find<MerchantEnterPayCodeController>().state;
  GlobalKey _repainKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MkPage(
        child: Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text('收款码'),
      ),
      body: Column(
        children: [
          Gaps.vGap16,
          RepaintBoundary(
            key: _repainKey,
            child: Center(
              child: Container(
                width: Get.width * 0.8,
                height: Get.height * 0.6,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Stack(
                  alignment: Alignment.topCenter,
                  children: [
                    Container(
                      width: double.infinity,
                      height: Get.height * 0.5,
                      decoration: BoxDecoration(
                        color: Color(0xFFFF8362),
                        borderRadius: BorderRadius.all(
                          Radius.circular(20),
                        ),
                      ),
                    ),
                    Positioned(
                      child: Center(
                          child: Column(
                        children: [
                          Gaps.vGap50,
                          Text(
                            '推荐使用兵馨支付',
                            style: TextStyle(color: Colors.white, fontSize: 24),
                          ),
                          Gaps.vGap24,
                          Container(
                            width: Get.width * 0.6,
                            height: Get.width * 0.6,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(8)),
                            child: Center(
                              child: Container(
                                width: Get.width * 0.5,
                                height: Get.width * 0.5,
                                child: PrettyQrView.data(
                                  data: json.encode({
                                    "code": "BDJW_SYS_BX",
                                    "type": "2",
                                    "data": {"shopId": "${Get.arguments['id']}"}
                                  }),
                                ),
                              ),
                            ),
                          )
                        ],
                      )),
                    ),
                    Positioned(
                        bottom: 26,
                        child: Center(
                          child: Row(
                            children: [
                              MkLoadImage(
                                Assets.imagesIcon,
                                width: 30,
                              ),
                              Gaps.hGap12,
                              Text(
                                '兵馨支付',
                                style: TextStyle(fontSize: 26),
                              )
                            ],
                          ),
                        ))
                  ],
                ),
              ),
            ),
          ),
          Gaps.vGap32,
          TDButton(
            text: '下载到手机',
            onTap: saveToMobile,
            theme: TDButtonTheme.primary,
            type: TDButtonType.outline,
            size: TDButtonSize.small,
          )
        ],
      ),
    ));
  }

  saveToMobile() async {
    bool hasPermission = await UtilPermission.requestStoragePermission();
    if (!hasPermission) {
      SmartDialog.showToast('请先授予存储权限');
      return;
    }
    SmartDialog.showLoading(msg: '生成中...');

    BuildContext? buildContext = _repainKey.currentContext;
    RenderRepaintBoundary? boundary =
        buildContext!.findRenderObject() as RenderRepaintBoundary?;
    ui.Image image = await boundary!.toImage();
    ByteData? _byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    await ImageGallerySaver.saveImage(_byteData!.buffer.asUint8List(),
        quality: 300, name: '商家码');
    SmartDialog.dismiss();
    SmartDialog.showNotify(msg: '已保存至本地相册', notifyType: NotifyType.success);
  }

  @override
  void dispose() {
    Get.delete<MerchantEnterPayCodeController>();
    super.dispose();
  }
}
